<template>
	<view>
		<view class="bg-white padding-left-xs padding-right-xs solid-bottom">
			<view class="cu-item action">
				<view @tap="click" class="flex justify-between align-center padding-left padding-right padding-top-xs">
					<view class="flex justify-start align-center">
						<view v-if="icon&&icon.type == 1" class="padding-right-xs">
							<text :class="'cu-tag radius sm line-'+icon.color">{{icon.name}}</text>
						</view>
						<view v-else-if="post.is_hot" class="padding-right-xs">
							<text class="cuIcon-hotfill text-red"></text>
						</view>
						<view v-else-if="post.has_video" class="padding-right-xs">
							<text class="cuIcon-video text-cyan"></text>
						</view>
						<text :class="'text-lg text-bold text-'+[post.is_read==1&&showReadStatus?'gray':'black']">{{post.title}}</text>
					</view>
				</view>
				<view @tap="click" class="padding-left padding-top-xs padding-right" style="width: 100%;">
					<view v-if="post.image_list && post.image_list.length > 0" style="width: 100%;">
						<view v-if="showSummary" class="padding-bottom-xs flex justify-start align-start" style="flex-direction: column;">
							<view v-if="post.topic&&shouldShowTopic" class="padding-bottom-xs">
								<view @tap.stop="clickTopic" class="flex justify-start align-center round"
									style="background-color: #eff6fb;padding: 6upx 10upx;">
									<view class="padding-right-xs">
										<image src="../static/images/setting/topic.png" style="width: 30upx;height: 30upx;">
										</image>
									</view>
									<text class="text-blue">{{post.topic.title}}</text>
								</view>
							</view>
							<text style="font-size: 30upx;" :class="['text-'+(post.is_read==1&&showReadStatus?'gray':'black')]">
								{{post.summary}}
							</text>
						</view>
						<view :class="'grid flex-sub grid-square col-'+post.image_list.length">
							<view class="bg-img bg-gray" v-for="(url,index) in post.image_list" :key="index">
								<image :src="url+'?imageView2/2/w/500/h/500/q/75'" mode="aspectFill"></image>
							</view>
						</view>
					</view>
					<view v-else class="flex justify-start align-start" style="flex-direction: column;">
						<view v-if="post.topic&&shouldShowTopic" class="padding-bottom-xs padding-top-xs">
							<view @tap.stop="clickTopic" class="flex justify-start align-center round"
								style="background-color: #eff6fb;padding: 6upx 10upx;">
								<view class="padding-right-xs">
									<image src="../static/images/setting/topic.png" style="width: 30upx;height: 30upx;">
									</image>
								</view>
								<text class="text-blue">{{post.topic.title}}</text>
							</view>
						</view>
						<text style="font-size: 30upx;" :class="['text-'+(post.is_read==1&&showReadStatus?'gray':'black')]">
							{{post.summary}}
						</text>
					</view>
				</view>
				<view :class="'padding-left padding-right padding-bottom-sm flex justify-between align-center '+[post.topic?'padding-top-xs':'']">
					<view class="flex justify-between align-end" style="width: 100%;">
						<view class="flex justify-start align-center padding-right">
							<view @tap.stop="jumpToUserProfile" class="cu-avatar sm round" :style="'background-image: url('+post.author.avatar+');'">
							</view>
							<view class="flex justify-start align-start padding-left-xs"
								style="flex-direction: column;">
								<text @tap.stop="jumpToUserProfile" class="text-grey text-sm">{{post.author.nickname}}</text>
								<view class="flex justify-start align-center">
									<text class="text-sm text-gray">
										{{post.show_time}}
									</text>
									<text class="padding-left-sm text-sm" style="color: #888;" v-if="post.forum">发布在</text>
									<text @tap="clickForum" v-if="post.forum"
										class="text-grey text-sm padding-left-xs">{{post.forum.name}}</text>
								</view>
							</view>
						</view>
						<view class="flex justify-end align-center">
							<view @tap="click" class="action padding-left-xl flex align-center justify-start">
								<text class="cuIcon-attention text-gray"></text>
								<view style="width: 2px;"></view>
								<text class="text-gray text-sm">{{format(post.read_count)}}</text>
							</view>
							<view @tap="click" v-if="post.comment_count > 0"
								class="action padding-left-xl flex align-center justify-start">
								<text class="cuIcon-comment text-gray"></text>
								<view style="width: 2px;"></view>
								<text class="text-gray text-sm">{{format(post.comment_count)}}</text>
							</view>
						</view>
					</view>
					<view v-if="showAvatarList" @tap="click" class="flex justify-end align-center">
						<view v-if="post.avatar_list && post.avatar_list.length > 0" class="cu-avatar-group flex">
							<view class="cu-avatar round sm" v-for="(avatar,index) in post.avatar_list" :key="index"
								:style="[{ backgroundImage:'url(' + avatar + ')' }]"></view>
						</view>
						<text class="padding-left-xs text-sm text-grey">{{post.join_user_count}}人参与</text>
						<text class="cuIcon-right"></text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		formatCount
	} from '@/api/utils.js'
	import config from '@/api/config.js'
	export default {
		name: "PostItemImage",
		data() {
			return {};
		},
		props: {
			post: {
				type: Object,
				default: {}
			},
			isLast: {
				type: Boolean,
				default: false
			},
			showSummary: {
				type: Boolean,
				default: false
			},
			showForum: {
				type: Boolean,
				default: false
			},
			shouldShowTopic: {
				type: Boolean,
				default: true
			},
			showAvatarList: {
				type: Boolean,
				default: false
			}
		},
		computed: {
			showReadStatus() {
				return config.showReadStatus==1?true:false
			},
			icon() {
				if (this.post.sort_index > 0) {
					return {
						type: 1,
						color: 'blue',
						name: '置顶'
					}
				}
				if (this.post.is_hot) {
					return {
						type: 2,
						color: 'red',
						image: 'hotfill',
						name: '热帖'
					}
				}
				if (this.post.is_recommend) {
					return {
						type: 1,
						color: 'orange',
						name: '推荐'
					}
				}
				if (this.post.link && this.post.link.length > 0 && this.post.link.indexOf('.mp4') !== -1) {
					return {
						type: 2,
						image: 'video',
						color: 'cyan',
						name: '视频'
					}
				}
				if (this.post.image_list && this.post.image_list.length > 0) {
					return {
						type: 2,
						image: 'pic',
						color: 'mauve',
						name: '有图'
					}
				}
				return null
			}
		},
		methods: {
			jumpToUserProfile() {
				uni.navigateTo({
					url: '/pages/profile/profile?userId=' + this.post.owner_id
				})
			},
			format(count)
			{
				return formatCount(count)
			},
			clickTopic()
			{
				this.$emit('clickTopic')
			},
			clickForum()
			{
				this.$emit('clickForum')
			},
			click() {
				this.$emit('click')
			}
		},
	}
</script>

<style lang="scss" scoped>
</style>
